
<template>
  <div class="form-wrap">
    <el-form ref="form"  :class="{flex:flex}"  :model="ruleForm"  :rules="ruleData"
             label-width="24%"
             label-position="top"
             :label-width="labelWidth"
    >
      <template v-for="item in formData">
        <el-form-item :label="item.label">
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>


<script >
import commonUtils from "@/utils/commonUtils";

export default {
  name: "BcForm",
  props: {
    form: {
      type: Array,
      default: function() {
        return [{
          type: 'input',
          label: '模板名称',
          props: 'name',
          defaultValue: '',
          rules: {
            required: true,
            message: '请输入',
            trigger: 'blur'
          }
        }]
      }
    },
    flex: { //默认列形式排列
      type: Boolean,
      default: false
    },
    labelWidth: { //默认列形式排列
      type: String,
      default: '140px'
    }
  },
  data() {
    return {
      ruleForm: {},
      ruleData: {},
      formData: []
    }
  },
  methods: {
    formInit(core) { //谁触发了formInit 目前就mounted和业务页面
      this.ruleForm = {}
      this.ruleData = {}
      this.formData = commonUtils.deepClone(this.form)
      this.formData.forEach(val => {
        this.$set(this.ruleForm, val.props, val.defaultValue || '')
        this.$set(this.ruleData, val.props, val.rules)
      })
      setTimeout(() => {
        this.formData.forEach(val => {
          if(val.props !== 'jdCode' && val.props !== 'areaCode' && val.props !== 'days'  && val.props !== 'supplierCode' && val.props !== 'myName' && val.props !== 'baseCode') {
            this.$refs[val.props] && this.$refs[val.props][0] && this.$refs[val.props][0].valueInt('', core)
          }
        })
        setTimeout(() => {
          this.clear()
        }, 20)
      }, 0)
    },
    clear() {
      if (this.$refs.form) {
        this.$refs.form.clearValidate()
      }
    },
  },

}
</script>




<style scoped lang="scss">
.form-wrap {
  padding: 20px 20px 0;
  background-color: #fff;
  width: 100%;
  min-width: 400px;

  .btn-wrap {
    height: 45px;
    margin: 30px 0 20px;

    ::v-deep  button {
      width: 100%;
      height: 100%;
    }
  }

  ::v-deep  .search-box .input-box {
    width: 220px;
  }

  ::v-deep .belongRoles .input-box {
    width: 100% !important;
  }

  .flex {
    display: flex;
    flex-wrap: wrap;

    ::v-deep .el-form-item {
      flex-grow: 1;
      display: flex;
      width: 24%;
      justify-items: center;
      flex-direction: column;
      align-items: flex-start;
      margin-bottom: 12px !important;
    }
  }

  ::v-deep .el-form-item {
    margin-bottom: 16px;

    &.block {
      width: 100%;

      .search-box .input-box {
        width: 100%;
      }
    }
  }

  ::v-deep .el-form-item:last-child {
    margin-bottom: 0;
  }
}

.pop-wrap {
  position: absolute;
  left: 0;
  top: -24px;
  display: flex;
  font-size: 12px;
  justify-content: center;
  white-space: nowrap;

  .pop-item {
    display: flex;
    align-items: center;
    line-height: 30px;
    margin-right: 5px;

    .pop-label {
      color: red;
      font-weight: bold;
    }

    .pop-value {
      color: #666;
      font-weight: bold;
    }
  }
}

::v-deep .el-form {
  user-select: text;
}

::v-deep .el-form-item__error {
  padding-top: 0px;
}
</style>
